<template>
	<view class="container">
		<u-swiper class="shopInfo" :list="swiperList" indicator indicatorMode="line" circular></u-swiper>
		<view class="content">
			<view class="titles">
				{{shopInfo.title}}
			</view>
			<view class="tips">
				{{shopInfo.content}}
			</view>
			<view class="bottom">
				<view class="price">
					<view class="pink">
						￥
					</view>
					<!-- 现价 -->
					<view class="big">
						{{shopInfo.presentPrice}}
					</view>
					<!-- 原价/价值 -->
					<view class="grey">
						￥{{shopInfo.originalPrice}}
					</view>
					<view class="grey">
						已售: {{shopInfo.sold}}
					</view>
				</view>
			</view>
		</view>
		<view class="pl-15 pr-15">
			<u-cell isLink class="phone" @click="shopPhone">
				<view slot="title" class="u-slot-title">
					<view class="y_center">
						<text class="u-cell-text mr-5">联系商家</text>
						<u-icon name="phone-fill" color="#83CF4D" size="24"></u-icon>
						<text class="u-cell-text ml-5">13888888888</text>
					</view>
				</view>
			</u-cell>
		</view>
		<view class="main">
			<view class="title">
				服务详情
			</view>
			<view class="content">
				北京柚子企业管理有限公司，创立于2004 年，是一家集美发、美容美体、护肤、彩妆、造型为一体的连锁机构公司。公司旗下现有知名品牌：柚子造型、柚子护肤造型、柚子护肤美发。
			</view>
			<image v-for="(item,index) in homeImgList" :key="index" :src="item" mode=""></image>
		</view>
		<view class="bottom_btn">
			<u-button text="立即预约" color="#FD4080" @click="makeAnAppointmentNow"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		$tabBarCctive
	} from 'vuex'
	export default {
		data() {
			return {
				shopInfo: {
					id: 1,
					imgUrl: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					title: '资深店长-精致烫发',
					content: '仅售300元，价值600元【资深店长】',
					originalPrice: 600,
					presentPrice: 300,
					sold: 100,
				},
				phone: 17674656046,
				value1: 1,
				swiperList: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/album/1.jpg',
				],
				homeImgList: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				]
			}
		},
		// 接受参数
		onLoad(option) {
			console.log(option)
			// const item = JSON.parse(decodeURIComponent(option.item));
		},
		// onShow() {
		// 	// uni.hideHomeButton()
		// },
		methods: {
			shopPhone() {
				console.log('调用拨号!')
				if (this.phone) {
					uni.makePhoneCall({
						phoneNumber: this.phone+'',
						// 成功回调
						success: (res) => {
							console.log('调用成功!')
						},
						// 失败回调
						fail: (res) => {
							console.log('调用失败!')
						}
					})
				}
			},
			makeAnAppointmentNow(){
				// 立即预约
				uni.navigateTo({
					url: `/pages/subscribe/InitiateOrder?projInfo=${JSON.stringify({
						id:this.shopInfo.id,
						title:this.shopInfo.title,
						price:this.shopInfo.presentPrice,
					})}`,
				});
			}
		},
	}
</script>

<style scoped="scss">
	.main {
		background-color: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		padding: 0 20rpx;
		padding-bottom: 120rpx;
	}

	.title_b {
		text-align: center;
		font-weight: bold;
		font-size: 40rpx;
	}

	.bottom_border {
		border-bottom: 8rpx solid #FD4080;
		width: 40rpx;
		margin: 10rpx auto;
	}

	.main .content {
		/* padding: 30rpx; */
		font-size: 30rpx;
		color: #929292;
	}

	image {
		border-radius: 20rpx;
		display: inline-block;
		margin-top: 20rpx;
		width: 100%;
	}

	/deep/.u-swiper,
	/deep/.u-swiper__wrapper,
	/deep/.u-swiper__wrapper__item__wrapper__image {
		height: 400rpx !important;
	}

	/deep/.u-swiper__indicator {
		right: 40rpx;
	}

	.content {
		padding: 30rpx;
		border-radius: 20rpx 20rpx 0 0;
		transform: translateY(-10rpx);
		background-color: #FFFFFF;
	}

	.content .titles {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.content .tips {
		font-size: 24rpx;
		color: #aaa;
		margin-bottom: 10rpx;
	}

	.bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bottom .price {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #D6D6D6;
	}

	.price .grey {
		font-size: 24rpx;
		margin-left: 10rpx;
		text-decoration: line-through;
	}

	.price .grey+.grey {
		margin-left: 30rpx;
		text-decoration: unset;
	}

	.price .pink {
		font-size: 28rpx;
		color: #FD4080;
	}

	.price .big {
		font-size: 44rpx;
		color: #FD4080;
	}

	/deep/.phone /deep/.u-cell__body {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.bottom_btn{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}
	
</style>
